<template>
  <div class="main">
    <div class="meedu-filter-box">
      <div class="category2-box">
        <div class="box">
          <div class="label">分类</div>
          <div class="item-box">
            <div
              class="item"
              :class="{ active: isactive == Item.title }"
              v-for="Item in List"
              :key="Item.id"
              @click="ChangeClick(Item.id, Item.title,1)"
            >
              {{ Item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="paper-item">
        <div
          class="paper-item-comp"
          @click="ExamMain(Item.id)"
          v-for="(Item, index) in tableList"
          :key="index"
        >
          <div class="title">{{ Item.testPaperName }}</div>

          <div class="info">
            <span>总分{{ Item.testPaperScore }}分</span>
            <el-divider direction="vertical"></el-divider>
            <span
              >得分:<span style="color: red">{{ Item.userScore }}分</span></span
            >
          </div>
        </div>
      </div>
	  <el-pagination background layout="prev, pager, next" :total="1000" :current-page="currentPage" @current-change="currentChange"
	   style="margin-top: 1.25rem;">
	  </el-pagination>
    </div>
  </div>
</template>

<script>
import { TestManager } from "../../request/test.js";
export default {
  data() {
    return {
      tableList: [],
      List: [
        {
          title: "全部",
          id: 2,
        },
        {
          title: "固定试卷",
          id: 1,
        },
        {
          title: "专项试卷",
          id: 0,
        },
      ],
      isactive: "全部",
	  active:2,
	  currentPage:1
    };
  },
  methods: {
    ExamMain(id) {
      localStorage.setItem("test_record", id);
      this.$router.push({path:"/ExamMain",query:{id:this.active}});
    },
    //获取当前用户试卷记录列表
    getUserTestRecordsAll() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      TestManager.getUserTestRecords(this.currentPage, 5).then((e) => {
		loading.close();
        console.log(e.data.data.dataList);
        this.tableList = e.data.data.dataList;
      });
    },

    //获取不同类型记录列表
    getUserTestRecords(id) {
      var parmas = {
        testPaperType: id,
      };
      TestManager.getUserTestRecords(this.currentPage, 5, parmas).then((e) => {
        console.log(e.data.data);
        this.tableList = e.data.data.dataList;
      });
    },
    ChangeClick(val, item,val1) {
      if (val == 2) {
        this.getUserTestRecordsAll();
      } else {
		if(val1==1)
		{
			this.currentPage=1;
		}
        this.getUserTestRecords(val);
      }
      this.isactive = item;
	  this.active=val;
    },
	currentChange(id)
	{
		this.currentPage=id;
		this.ChangeClick(this.active,this.isactive,0);
	}
  },
  created() {
    this.getUserTestRecordsAll();
  },
};
</script>

<style scoped="scoped" lang="scss">
.main {
  width: 90%;
  height: 100px;
  margin-left: 5%;
  margin-right: 5%;
  // background-color: #00B6B4;
}

.meedu-filter-box {
  width: 100%;
  margin-top: 1.875rem;
}

.meedu-filter-box .category2-box {
  width: 100%;
  height: auto;
  background: -webkit-linear-gradient(left, #03d3bd, #00dbcf);
  border-radius: 8px;
  margin: 0 auto;
  padding: 15px 30px 5px 30px;
  box-sizing: border-box;
}
.active {
  background-color: rgba(160, 175, 187, 0.9);
  border-radius: 4px;
  color: #ffffff;
}

.meedu-filter-box .category2-box .box {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
}

.meedu-filter-box .category2-box .box .label {
  width: 42px;
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 14px;
  margin-right: 30px;
  margin-top: 10px;
}

.meedu-filter-box .category2-box .box .item-box {
  width: 1068px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
}

.meedu-filter-box .category2-box .box .item-box .item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 14px;
  padding: 10px 15px;
  cursor: pointer;
  margin-bottom: 10px;
}

.paper-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  box-sizing: border-box;
}

.paper-item-comp {
  width: 100%;
  height: 116px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 50px;
  margin-bottom: 30px;
}

.paper-item-comp:hover {
  box-shadow: 0 2px 3px -1px #ececec;
}

.title {
  height: 16px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333;
  line-height: 16px;
}

.info {
  height: 30px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  // font-weight: 600;
  // color: #000000;
  color: #666;
  line-height: 30px;
}
</style>
